@using DotNetNuke.Entities.Modules;
@using System.Collections;
@using System.Configuration;
@using YouTubeGallery;


@{    
    ModuleController controller = new ModuleController();
    Hashtable settings = controller.GetModuleSettings(Dnn.Module.ModuleID);

    if (settings["Width"] == null)
    {
        controller.UpdateModuleSetting(Dnn.Module.ModuleID, "Width", "640");
    }

    if (settings["Height"] == null)
    {
        controller.UpdateModuleSetting(Dnn.Module.ModuleID, "Height", "385");
    }

    if (settings["OutlineColor"] == null)
    {
        controller.UpdateModuleSetting(Dnn.Module.ModuleID, "OutlineColor", "000000");
    }

    if (settings["BackgroundColor"] == null)
    {
        controller.UpdateModuleSetting(Dnn.Module.ModuleID, "BackgroundColor", "990000");
    }

    if (settings["Autoplay"] == null)
    {
        controller.UpdateModuleSetting(Dnn.Module.ModuleID, "Autoplay", true.ToString());
    }     
    bool autoplay;
    bool.TryParse((string)settings["Autoplay"], out autoplay);
    string autoplayFlag = autoplay ? "1" : "0";
    
    string connectionString = ConfigurationManager.ConnectionStrings["SiteSqlServer"].ConnectionString;
    List<YouTubeGallery> galleryList;
    using(GalleryDataContext dataContext = new GalleryDataContext(connectionString))
    {
        galleryList = dataContext.YouTubeGalleries.Where(o => o.ModuleId == Dnn.Module.ModuleID).ToList();
    }        
}

<style type="text/css">

.youtube-thumb{
	border: 1px solid #CCC;
	margin: 5px;
	padding: 10px;
	cursor: pointer;
	z-index: 1;
	position: relative;
	
}

.youtube-button{
	clear: both;
	position:absolute;
	left: 60px;
	top: 50px;
	margin: 0px;
	border: 0px;
	z-index: 5;
	cursor: pointer;
}

.youtube-gallery{
	width: 174px;
	float: left;
	position: relative;
	height: 390px;
	overflow-x: hidden;
	overflow-y: scroll;
}

.youtube-display{
	
	float: left;
	margin: 5px;	
}

a:active
{
  outline: none;
}

:focus
{
  -moz-outline-style: none;
}

.youtube-select{
	border: 1px solid black !important;
}

.youtube-preload{
	position:absolute;
	left: -2000px;
	top: -2000px;
}

.youtube-cont{
	position:relative;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $(".youtube-gallery").before("<div class='youtube-display'></div>");
        $(".youtube-gallery a").attr("href", "#");

        $(".youtube-cont").click(function () {
            $(".youtube-thumb").removeClass("youtube-select");
            $(".youtube-thumb").css("background-color", "transparent");
            $(this).children(".youtube-thumb").addClass("youtube-select");
            $(this).children(".youtube-thumb").css("background-color", "#@(settings["BackgroundColor"])");
            youtubeID = $(this).children(".youtube-thumb").attr("title");
            $(".youtube-display .youtube-video").remove();
            youtubeScript = ('<object width="@(settings["Width"])" height="@(settings["Height"])"><param name="movie" value="http://www.youtube.com/v/' + youtubeID + '?fs=1&amp;hl=en_US&amp;color1=@settings["OutlineColor"]&amp;color2=@settings["BackgroundColor"]&autoplay=@autoplayFlag"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/' + youtubeID + '?fs=1&amp;hl=en_US&amp;color1=@settings["OutlineColor"]&amp;color2=@settings["BackgroundColor"]&autoplay=@autoplayFlag" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="@(settings["Width"])" height="@(settings["Height"])"></embed></object>');
            $(".youtube-display").append("<div class='youtube-video'>" + youtubeScript + "</div>");
        });

        $(".youtube-cont").first().click();


    });

</script>

<div class="youtube-gallery">

@foreach (YouTubeGallery item in galleryList)
{
<div class="youtube-cont">
<img src="@HttpContext.Current.Request.ApplicationPath/DesktopModules/RazorModules/YouTubeGallery/images/play-button.png" class="youtube-button" />
<img src="http://i1.ytimg.com/vi/@item.YouTubeGuid/default.jpg" title="@item.YouTubeGuid" class="youtube-thumb" />
</div>
}
</div>

